<script lang="ts">
import {defineComponent, nextTick, onMounted, reactive, ref, toRefs} from 'vue'
import IconChange from "@/components/iconChange/icon-change.vue";
import {sendGlobalMessage} from "@/hooks/globalmessage.ts";

export default defineComponent({
  name: 'compIconChange',
  components: {IconChange},

  setup() {

    onMounted(() => {
    })
    const data = reactive({

      propList: [
        {
          prop: "modelValue",
          defaultValue: "空",
          instructions: "icon组件name sting类型"
        },
        {
          prop: "width",
          defaultValue: "600px",
          instructions: "图标展示列宽"
        },
        {
          prop: "maxHeight",
          defaultValue: "300px",
          instructions: "图标展示最高高度"
        },
        {
          prop: "placement",
          defaultValue: "right-start",
          instructions: "图标展示列位置 参考el-popover"
        },
        {
          prop: "trigger",
          defaultValue: "hover",
          instructions: "图标展示触发方式 参考el-popover"
        },
        {
          prop: "changeColor",
          defaultValue: "#1677FF",
          instructions: "图标选中时颜色"
        },
        {
          prop: "unChangeColor",
          defaultValue: "#363639",
          instructions: "图标未选中颜色"
        },
        {
          prop: "autoCopy",
          defaultValue: "false",
          instructions: "选中是否自动复制icon字符串"
        }

      ],
      iconChangeProps: {
        modelValue: "",
        width: "600",
        maxHeight: "300px",
        placement: "right-start",
        trigger: "hover",
        changeColor: "#1677ff",
        unChangeColor: "#8181d3",
        autoCopy: true
      },
      emitMethodList: [
        {
          name: "changeIcon",
          param: "iconStr:string",
          instructions: "选中图标时触发"
        }
      ]
    })

    const methods = {
      changeIcon(icon: string) {
        sendGlobalMessage("当前选择的icon是:" + icon)
      }
    }

    const validators = {}


    const rules = reactive({})

    const refs = {
      iconChangeRef: ref()
    }


    return {
      ...toRefs(data),
      ...methods,
      ...refs,
      validators,
      rules

    }
  }
})
</script>

<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <el-row>
      <el-text style="color:#1677FF">组件props:</el-text>
    </el-row>
    <el-row>
      <div style="display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in propList" style="width: calc(50% - 10px)" :key="index">
          属性名:{{ item.prop }} 默认值:{{ item.defaultValue || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>

    <el-row>
      <el-text style="color:#1677FF">组件emits:</el-text>
    </el-row>
    <el-row>
      <div style="width:100%;display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in emitMethodList" style="width: calc(50% - 10px)" :key="index">
          事件名:{{ item.name }} 参数以及类型:{{ item.param || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>
    <el-row>
      <el-text style="color:#1677FF">组件样式:</el-text>
    </el-row>
    <icon-change ref="iconChangeRef"
                 :auto-copy="iconChangeProps.autoCopy"
                 :width="iconChangeProps.width"
                 :max-height="iconChangeProps.maxHeight"
                 :change-color="iconChangeProps.changeColor"
                 :un-change-color="iconChangeProps.unChangeColor"
                 :placement="iconChangeProps.placement"
                 :trigger="iconChangeProps.trigger"
                 :model-value="iconChangeProps.modelValue"
                 @change="changeIcon">

    </icon-change>
  </div>
</template>

<style scoped>

</style>